/**
 * @名称: actions,photoLayer,photoBrowser,popupUp,popupDown model of layer
 * @更新: 2021.01.27
 * @作者: yuguoliang
 * @博客：http://www.web000.cn
 */
;(function (window, document, undefined) {
    var $ = window.jQuery;
    var layer = window.layer;

    //actionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
    $.actions = function (option) {
        var defaults = {
            title: null,
            style: '',
            cancleText: '取消',
            actions: [{
                text: '操作2',
                style: '',
                onClick: null
            }]
        };
        var options = $.extend({}, defaults, option);
        var html = '';
        if (options.title) {
            html += '<div class="weui-actionsheet-title" style="' + options.style + '">' + options.title + '</div>';
        }
        html += '<ul class="menu-list">';
        $.each(options.actions, function (index, item) {
            html += '<li style="' + item.style + '">' + item.text + '</li>';
        })
        html += '</ul>';
        html += '<p class="btn-cancle">取消</p>';
        $.popupUp({
            content: html,
            style: "background-color:#efeff4",
            success: function () {
                $('.weui-actionsheet .menu-list li').each(function (index, item) {
                    var onClick = options.actions[index].onClick;
                    if (onClick) {
                        $(this).on('click', onClick);
                    }
                });
                $('.weui-actionsheet .btn-cancle').on('click', function () {
                    layer.closeAll();
                });
                $(".layui-m-layershade").on("touchmove", function (e) {
                    e.preventDefault();
                });
                $('.layui-m-layermain').on('touchmove', function (e) {
                    e.preventDefault();
                });
            }
        });
    };

    //专门用于弹出图片
    $.photoLayer = function (option) {
        var defaults = {
            btnClose: false,
            classNameIn: 'photo-layer',
            shade: true,
            shadeClose: true,
            style: 'width:90%;max-width:640px;background-color:transparent;',
            items: [
                // {
                //     'img':'',
                //     'className':null,
                //     'link':null,
                // }
            ],
            success: null,
            end: null,
        };
        var options = $.extend({}, defaults, option);
        var html = '<div class="' + options.classNameIn + '">';
        if (options.items.length > 0) {
            html += '<ul>';
            for (var i = 0; i < options.items.length; i++) {
                if (typeof options.items[i] === 'string') {
                    html += '<li><img src="' + options.items[i] + '" width="100%" /></li>';
                } else if (typeof options.items[i] === 'object' && Object.prototype.toString.call(options.items[i]) === '[object Object]') {
                    if (options.items[i].img) {
                        if (options.items[i].link) {
                            html += '<li class="' + (options.items[i].className ? options.classNameIn + '-' + options.items[i].className : '') + '"><a href="' + options.items[i].link + '"><img src="' + options.items[i].img + '" width="100%" /></a></li>';
                        } else {
                            html += '<li class="' + (options.items[i].className ? options.classNameIn + '-' + options.items[i].className : '') + '"><img src="' + options.items[i].img + '" width="100%" /></li>';
                        }
                    }
                }
            }
            html += '</ul>';
            if (options.btnClose) {
                html += '<span class="layer-close"><i class="weui-icon-cancel"></i></span>';
            }
        }
        html += '</div>';
        var indexLayer = layer.open({
            type: 1,
            shade: options.shade,
            shadeClose: options.shadeClose,
            style: options.style,
            className: options.classNameIn + '-wrap',
            content: html,
            success: function () {
                var $close = $('.' + options.classNameIn + ' .photo-layer-close,'+'.' + options.classNameIn + ' .layer-close,');
                $close.on('click', function () {
                    layer.close(indexLayer);
                    return false;
                })

                if ($.isFunction(options.success)) {
                    options.success.apply(this, null);
                }
            },
            end: function () {
                if ($.isFunction(options.end)) {
                    options.end.apply(this, null);
                }
            }
        });
        return indexLayer;
    };

    //专门用于幻灯片展示图片
    $.photoBrowser = function (option) {
        var defaults = {
            isShownav: true,
            effect: 'left',
            autoPlay: false,
            initIndex: 0,//初始化图片索引
            initImg: null,//初始化图片
            typeOrigin: '0',//缩放中心点：0为屏幕中心，1点击位置,2点击元素中心
            itemsWrap: '',
            itemSelector: '',
            items: [],//图片数组
            eClick: null,//点击时传递的事件参数，typeOrigin=1的时候需要
            onSlideChange: function () {

            },
            onOpen: function () {

            },
            onClose: function () {

            },
        };
        var options = $.extend({}, defaults, option);
        var initIndex = options.initIndex;
        var initImg = options.initImg;
        var currIndex = options.initIndex;

        var originX = getCurDom().offset().left + getCurDom().width() / 2;
        var originY = getCurDom().offset().top - $(document).scrollTop() + getCurDom().height() / 2;
        if (options.typeOrigin == 1 && options.eClick) {
            originX = options.eClick.clientX;
            originY = options.eClick.clientY;
        }
        originX = originX / window.screen.availWidth * 100;
        originY = originY / window.screen.availHeight * 100;
        var origin = originX + '% ' + originY + '%';
        var style = 'background-color:transparent;';
        style += 'width:' + $(document).width() + 'px;';
        if (options.typeOrigin != 0) {
            style += '-webkit-transform-origin:' + origin + ';transform-origin:' + origin + ';';
        }
        var html = '<div class="page-scale">';
        html += '<ul class="slide-photo-browser flex-box">';
        html += '<li><P class="container"><img src="' + initImg + '" /></P></li>';
        html += '</ul>';
        html += '</div>';
        $.popupUp({
            anim: 'weui-page-scale',
            content: html,
            style: style,
            success: function () {
                var htmlSilde = '';
                var dataItems = options.items;
                if (dataItems.length > 0) {
                    htmlSilde += '<ul class="slide-photo-browser flex-box">';
                    for (var i = 0; i < dataItems.length; i++) {
                        htmlSilde += '<li>';
                        htmlSilde += '<P class="container"><img src="' + dataItems[i] + '" /></P>';
                        htmlSilde += '</li>';
                    }
                    htmlSilde += '</ul>';
                }

                $('.page-scale').html(htmlSilde);
                if (dataItems.length > 1) {
                    $(".slide-photo-browser").slide({
                        "autoPlay": options.autoPlay,
                        "effect": options.effect,
                        "defaultIndex": initIndex,
                        "isShownav": options.isShownav,
                        "slideStart": function () {
                            currIndex = this.index;
                            if (options.typeOrigin == '2') {
                                updateOrigin();
                            }
                        },
                    });
                }

                //点击关闭图片，滑动则移动图片
                var isClick = true;
                $('.weui-page-scale .container img').on('touchstart', function (e) {
                })

                $('.weui-page-scale .container img').on('touchmove', function () {
                    isClick = false;
                })

                $('.weui-page-scale .container img').on('touchend', function () {
                    if (isClick) {
                        layer.closeAll();
                    }
                })

                $('.weui-page-scale').on('click', function () {
                    layer.closeAll();
                })
            }
        });

        function getCurDom() {
            return $(options.itemsWrap).find(options.itemSelector).eq(currIndex);
        }

        function updateOrigin() {
            var originX = getCurDom().offset().left + getCurDom().width() / 2;
            var originY = getCurDom().offset().top - $(document).scrollTop() + getCurDom().height() / 2;
            originX = originX / window.screen.availWidth * 100;
            originY = originY / window.screen.availHeight * 100;
            var origin = originX + '% ' + originY + '%';
            var style = 'background-color:transparent;';
            style += '-webkit-transform-origin:' + origin + ';transform-origin:' + origin + ';';

            $('.weui-page-scale').attr('style', style);
        }
    };

    //popupUp是由底部弹出的弹窗，带有缓动动画弹出和隐藏。
    $.popupUp = function (option) {
        var defaults = {
            zIndex: -1,
            anim: 'weui-actionsheet',
            className: null,
            content: null,
            shadeClose: true,
            style: null,
            success: null,
            end: null
        };
        var options = $.extend({}, defaults, option);
        layer.open({
            zIndex: options.zIndex,
            type: 3,
            className: options.className ? (options.anim + ' ' + options.className) : options.anim,
            anim: options.anim,
            shade: 'opacity: 0;background-color: rgb(0, 0, 0);transition: all .3s;-webkit-transition: all .3s;',
            shadeClose: options.shadeClose,
            content: options.content,
            style: (options.style ? options.style : ''),
            success: function () {
                $('.' + options.anim).width();//强制取值一次，防止上下代码合并执行，否则动画效果无效
                $('.' + options.anim).addClass(options.anim + '-toggle');

                $('.layui-m-layershade').width();//强制取值一次，防止上下代码合并执行，否则动画效果无效
                $('.layui-m-layershade').addClass(options.anim + '-shade');

                options.success ? options.success() : false;
            },
            end: function () {
                options.end ? options.end() : false;
            }
        });
    };

    //popupDown是由顶部弹出的弹窗，可选带有缓动动画弹出和隐藏。
    $.popupDown = function (option) {
        var defaults = {
            zIndex: -1,
            anim: 'weui-actionsheet-top',
            className: null,
            content: null,
            shadeClose: true,
            style: null,
            success: null,
            end: null
        };
        var options = $.extend({}, defaults, option);
        var className = options.className ? (options.anim + ' ' + options.className) : options.anim;
        layer.open({
            zIndex: options.zIndex,
            type: 3,
            className: className,
            anim: options.anim,
            shade: 'opacity: 0;background-color: rgb(0, 0, 0);transition: all .3s;-webkit-transition: all .3s;',
            shadeClose: options.shadeClose,
            content: options.content,
            style: (options.style ? options.style : ''),
            success: function () {
                $('.' + options.anim).width();//强制取值一次，防止上下代码合并执行，否则动画效果无效
                $('.' + options.anim).addClass(options.anim + '-toggle');

                $('.layui-m-layershade').width();//强制取值一次，防止上下代码合并执行，否则动画效果无效
                $('.layui-m-layershade').addClass(options.anim + '-shade');

                options.success ? options.success() : false;
            },
            end: function () {
                options.end ? options.end() : false;
            }
        });
    };
})(window, document);
